<template>
  <div class="number-keyboard-wrapper">
    <div class="left-number-keyboard-wrapper">
      <key v-for="i in keys" class="number-keyboard-input-key" :class="{'input-key-back':i === '<'}" :key="`number${i}`" :keyvalue="i" @input="handleInput">
        <div v-if="i === '<'"></div>
      </key>
    </div>
    <!-- <div class="right-confirm-keyboard-wrapper">
      <key v-for="i in confirmkeys" class="confirm-keyboard-key number-keyboard-input-key" :isvertical="true" :class="{'input-key-back':i === '<'}" :key="`number${i}`" :keyvalue="i" @input="handleInput">
        <div v-if="i === '<'"></div>
      </key>
    </div> -->
  </div>
</template>
<style>
/* 数字键盘包裹层 */
.number-keyboard-wrapper {
  width: 100%;
  display: -webkit-flex;
  display: flex;
}
/* 左侧数字键盘 */
.left-number-keyboard-wrapper {
  width: 100%;
  /* border-right: 1px solid #eeeeee; */
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
/* 右侧确认键盘 */
.right-confirm-keyboard-wrapper {
  width: 27.6%;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
/* 撤销输入键 */
.input-key-back {
  background-image: url('../assets/back.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px auto;
}
/* 撤销输入键-激活时 */
.input-key-back:active {
  background-image: url('../assets/back-black.svg');
}
/* 输入单键 */
.number-keyboard-input-key {
  border-right: 1px solid #eeeeee; /* no */
  border-top: 1px solid #eeeeee; /* no */
  border-left: none;
  border-bottom: none;
}
/* 顶部的border */
/* .number-keyboard-input-key:nth-child(1),
.number-keyboard-input-key:nth-child(2),
.number-keyboard-input-key:nth-child(3) {
  border-top: none;
  border-top: 1px solid #eee;
} */
/* 去除整体右侧的border */
.number-keyboard-input-key:nth-child(3n) {
  border-right: none;
}
/* 确认键盘键 */
.confirm-keyboard-key {
  font-weight: normal !important;
  border-right: none;
}
</style>
<script>
import key from './key'
export default {
  components: {
    key
  },
  data() {
    return {
      // 键盘按键
      keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '<']
      // 确认按键
      // confirmkeys: ['<', '完成']
    }
  },
  methods: {
    handleInput(key) {
      this.$emit('inputkey', key)
    }
  }
}
</script>
